<template>
  <div class="div1">
    <el-tabs v-model="activeName">
      <el-tab-pane label="服务基本信息" name="first">
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">接口名称：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servName }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">数据库类型：</span>
          </el-col>
          <el-col :span="21">
            <span v-if="item.servDataType == 41" class="sn2">mysql</span>
            <span v-if="item.servDataType == 42" class="sn2">oracle</span>
            <span v-if="item.servDataType == 43" class="sn2">sql service</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">数据库地址：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servUrl }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">数据库账号：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servAccount }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">数据库密码：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servPassword }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">可见方式：</span>
          </el-col>
          <el-col :span="21">
            <span v-if="item.servLimit == 1" class="sn2">公开</span>
            <span v-if="item.servLimit == 2" class="sn2">条件公开</span>
            <span v-if="item.servLimit == 3" class="sn2">线下</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">发布时间：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servDate ? item.servDate.substring(0, 10) : '' }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">发布单位：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servUnit }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">发布地址：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servAddress }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">联系人：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servUser }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">联系电话：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servPhone }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">联系人邮箱：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servEmail }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">关键字：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servKeyword }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">预览图：</span>
          </el-col>
          <el-col :span="21">
            <img :src="item.servImg" style="width: 150px;height: 150px">
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="使用帮助" name="second">
        <pdf
            :key="i"
            :page="i"
            v-for="i in numPages"
            :src="loadingTask">
        </pdf>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: "InterfaceDetails",
  components: {
    pdf
  },
  data() {
    return {
      loadingTask: undefined,
      numPages: undefined,
      item: {},
      activeName: 'first',
    }
  },
  mounted() {
    let servId = this.$route.query.servId;
    if (!window.sessionStorage.getItem("serviceDetails" + servId)) {
      this.item = this.$route.query.item
      window.sessionStorage.setItem("serviceDetails" + servId, this.$XEUtils.toJSONString(this.$route.query.item))
    } else {
      this.item = this.$XEUtils.toStringJSON(window.sessionStorage.getItem("serviceDetails" + servId))
    }

    if (this.item.servApi && this.item.servApi !== '') {
      setTimeout(() => {
        this.loadingTask = pdf.createLoadingTask(this.item.servApi);
        this.loadingTask.promise.then(pdf => {
          this.numPages = pdf.numPages;
        });
      }, 500)
    }
  }
}
</script>

<style scoped>
.div1 {
  width: 60%;
  margin-left: 20%;
  background-color: #ffffff;
  padding: 20px 20px 20px 20px;
}

.er1 {
  font-size: 16px;
  margin-top: 20px;
}

table, table tr th, table tr td {
  border: 1px solid #ccc;
  height: 28px;
}

table {
  border-collapse: collapse;
}
</style>
